<div class="services-view" ng-style="$ctrl.viewStyle">
  <div ng-if="!$ctrl.loaded" class="spinner-container">
    <div class="spinner spinner-xl"></div>
  </div>
  <div ng-if="$ctrl.loaded" class="services-view-container mobile-{{$ctrl.mobileView}}-view">
    <div class="add-methods">
      <h1>{{$ctrl.sectionTitle}}</h1>
      <div ng-if="$ctrl.onDeployImageSelected || $ctrl.onFromFileSelected || $ctrl.onCreateFromProject">
        <ul class="add-other hidden-md hidden-lg">
          <li uib-dropdown="" class="dropdown">
            <a uib-dropdown-toggle="" class="dropdown-toggle" id="add-methods-dropdown" href="" aria-haspopup="true" aria-expanded="false">
              Custom Add
              <span class="caret" aria-hidden="true"></span>
            </a>
            <ul class="uib-dropdown-menu dropdown-menu pull-right" aria-labelledby="add-methods-dropdown">
              <!-- note these are duplicated below -->
              <li ng-if="$ctrl.onDeployImageSelected">
                <a href="" ng-click="$ctrl.onDeployImageSelected()">Deploy Image</a>
              </li>
              <li ng-if="$ctrl.onFromFileSelected">
                <a href="" ng-click="$ctrl.onFromFileSelected()">Import YAML / JSON</a>
              </li>
              <li ng-if="$ctrl.onCreateFromProject">
                <a href="" ng-click="$ctrl.onCreateFromProject()">Select from Project</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="add-other hidden-xs hidden-sm">
          <!-- note these are duplicated above -->
          <li ng-if="$ctrl.onDeployImageSelected">
            <a href="" ng-click="$ctrl.onDeployImageSelected()">Deploy Image</a>
          </li>
          <li ng-if="$ctrl.onFromFileSelected">
            <a href="" ng-click="$ctrl.onFromFileSelected()">Import YAML / JSON</a>
          </li>
          <li ng-if="$ctrl.onCreateFromProject">
            <a href="" ng-click="$ctrl.onCreateFromProject()">Select from Project</a>
          </li>
        </ul>
      </div>
    </div>
    <ul class="nav nav-tabs nav-tabs-pf services-categories">
      <li ng-repeat="category in $ctrl.categories"
          ng-if="category.hasItems"
          ng-class="{ active: $ctrl.currentFilter === category.id }">
        <a href="" id="{{'category-'+category.id}}" class="services-category-heading" ng-click="$ctrl.selectCategory(category.id)">{{category.label}}</a>
        <a ng-click="$ctrl.mobileView = 'categories'" class="services-back-link" href="">Back</a>
      </li>
    </ul>

    <div class="services-inner-container">
      <!-- Do not show sub-category items for 'All' or 'Other' main categories -->
      <ul class="services-sub-categories"
          ng-if="$ctrl.currentFilter !== 'other' && $ctrl.currentFilter !== 'all'">
        <li ng-repeat="subCategory in $ctrl.subCategories track by subCategory.id"
             ng-if="subCategory.hasItems"
             ng-attr-id="{{subCategory.id}}"
             class="services-sub-category"
             ng-class="{ active: $ctrl.currentSubFilter === subCategory.id }">
          <a href="" id="{{'services-sub-category-'+subCategory.id}}"
             class="services-sub-category-tab" ng-click="$ctrl.selectSubCategory(subCategory.id)">
            <div class="services-sub-category-tab-image" ng-if="imageUrl = (subCategory.imageUrl || (subCategory.icon | imageForIconClass))">
              <img ng-src="{{imageUrl}}" alt="">
            </div>
            <div class="services-sub-category-tab-icon {{subCategory.icon | normalizeIconClass}}"
                ng-if="subCategory.icon && !subCategory.imageUrl && !(subCategory.icon | imageForIconClass)"></div>
            <div class="services-sub-category-tab-name">{{subCategory.label}}</div>
          </a>
         <a ng-click="$ctrl.mobileView = 'subcategories'" class="services-back-link" href="">Back</a>
          <div ng-if="$ctrl.currentSubFilter === subCategory.id" class="services-items">
            <catalog-filter class="services-items-filter"
                            config="$ctrl.filterConfig"
                            vendors="$ctrl.vendors"
                            filter-on-keyword="$ctrl.keywordFilterValue"
                            apply-filters="$ctrl.applyFilters($event)">
            </catalog-filter>
            <div class="pf-empty-state" ng-if="$ctrl.filterConfig.appliedFilters.length > 0 && $ctrl.filterConfig.resultsCount === 0">
              <pf-empty-state config="$ctrl.emptyFilterConfig"></pf-empty-state>
            </div>
            <a href="" class="services-item" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.serviceViewItemClicked(item)">
              <div ng-if="!item.imageUrl" class="services-item-icon">
                <span class="{{item.iconClass}}"></span>
              </div>
              <div ng-if="item.imageUrl" class="services-item-icon">
                <img ng-src="{{item.imageUrl}}" alt="">
              </div>
              <div class="services-item-name" title="{{item.name}}">
                {{item.name}}
              </div>
            </a>
          </div>
        </li>
      </ul>

      <!-- Show catalog item for 'All' and 'Other' main categories -->
      <div ng-if="$ctrl.currentFilter === 'other' || $ctrl.currentFilter === 'all'" class="services-no-sub-categories">
        <div class="services-items" ng-class="{'no-items-available': $ctrl.isEmpty}">
          <div ng-if="$ctrl.isEmpty">
            <div class="pf-empty-state">
              <pf-empty-state config="$ctrl.noItemsConfig"></pf-empty-state>
            </div>
          </div>
          <catalog-filter ng-if="!$ctrl.isEmpty"
                          class="services-items-filter"
                          config="$ctrl.filterConfig"
                          vendors="$ctrl.vendors"
                          filter-on-keyword="$ctrl.keywordFilterValue"
                          apply-filters="$ctrl.applyFilters($event)">
          </catalog-filter>
          <div class="pf-empty-state" ng-if="$ctrl.filterConfig.appliedFilters.length > 0 && $ctrl.filterConfig.resultsCount === 0">
            <pf-empty-state config="$ctrl.emptyFilterConfig"></pf-empty-state>
          </div>
          <a href="" class="services-item" ng-repeat="item in $ctrl.filteredItems track by item.resource.metadata.uid" ng-click="$ctrl.serviceViewItemClicked(item)">
            <div ng-if="!item.imageUrl" class="services-item-icon">
              <span class="{{item.iconClass}}"></span>
            </div>
            <div ng-if="item.imageUrl" class="services-item-icon">
              <img ng-src="{{item.imageUrl}}" alt="">
            </div>
            <div class="services-item-name" title="{{item.name}}">
              {{item.name}}
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
